<template> 
	<div id="index">
		<div class="index_right_header">
			<div class="header">
				<div class="left">
					<img src="../assets/HomeLogo.png" class="logo-img"/>
				</div>
				<div class="right">
					{{'当前用户:'+userInfo.realname||'未登录'}}
					<el-button type="primary" @click="goPage('/')" round>退出登录</el-button>
				</div>
			</div>
		<div class="index_left">
			 <el-menu
			     :router="true" default-active="2" active-text-color="#ffffff"
			              background-color="transparent" text-color="#fff"
				  >
					  <el-menu-item index="/city">
						  <i class="el-icon-location"></i>
						  <span slot="title">首页</span>
					  </el-menu-item>
					   <el-submenu index="/product">
					   <template slot="title">
						    <i class="el-icon-location"></i>
			          <span>功能</span>
			        </template>
			        <el-menu-item-group>
			          
			         
			        </el-menu-item-group>
			          <el-menu-item index="/sovelo">销售地点管理</el-menu-item>
					  <el-menu-item index="/company">医药公司管理</el-menu-item>
					  <el-menu-item index="/sovelo">城市信息管理</el-menu-item>
					  <el-menu-item index="/drug">药品信息管理</el-menu-item>
					  <el-menu-item index="/sovelo">医保政策管理</el-menu-item>
					  <el-menu-item index="/sovelo">医药公司政策管理</el-menu-item>
					  <el-menu-item index="/sovelo">必备材料管理</el-menu-item>
			        </el-menu-item-group>
			        <el-submenu index="1-4">
			          <template slot="title">医师信息详情</template>
			          <el-menu-item index="/doctormessage">详细信息统计</el-menu-item>
			        </el-submenu>
			      </el-submenu>
			    </el-menu>
		</div>
			<div class="content">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "index",
		data() {
			return {
				userInfo:{}
			}
		},
		created(){
			this.loadUserInfo();
			},
		methods: {
		loadUserInfo() {
		    const userInfo = localStorage.getItem("userInfo");
		    if(userInfo){
		      try{
		        // 直接解析为对象（已经是 userInfo 对象）
		        this.userInfo = JSON.parse(userInfo);
		        console.log("用户信息:", this.userInfo);
		      } catch(error){
		        console.error("解析失败", error);
		      }
		    }
		  },
			goPage(url) {
				if (this.$route.path !== url) { 
				     this.$router.push(url);
					 }
			}
		}
	}
</script>

<style lang="less" scoped>
	 .el-menu{
	}
	.el-menu span{
		color: #fff !important;
	}
	.el-menu i{
		color: #fff !important;
	}
	#index{
		width:100%;
		height: 100vh;
		background-color: #d9d9d9;
		display: flex;
		flex-direction: column;
		.index_left{
			padding-top: 100px;
			width: 240px;
			height: calc(100% - 100px);
			position: fixed;
			top: 120px;
			left: 0;
			overflow-y: auto;
			//background-color: #5ba584;;
			 background-image: url('../assets/MenuBackGround.jpg');
			 background-size: cover; /* 覆盖整个容器 */
			 background-position: center; /* 居中显示 */
			 background-repeat: no-repeat; /* 不重复 */
			 background-blend-mode: overlay; /* 叠加模式，使文字更清晰 */
			 overflow: hidden; /* 防止内容溢出 */
		}
		.index_right_header{
			width: 100%;
			height: 100%;
			.header{
				display: flex;
				justify-content: space-between;
				padding:0px 10px;
				height: 100px;
				line-height: 60px;
				background-color: #dadada;
				.left{
					display: block;
	width: 450px;
	height:auto;
				}
				.logo-img{
					max-width: 100%;
					height: auto;
				}
				.right{
					margin-top: 20px;
					font-size: 20px;
					color: rgba(20, 161, 177, 1.0);
				}
			}
		}
		.content{
		  margin-left: 240px; /* 内容区域左侧留出侧边栏宽度 */
		    margin-top: 20px;
		    margin-right: 20px;
		    height: calc(100vh - 140px); /* 计算内容区域高度 */
		    background-color: #fff;
		    overflow-y: auto; /* 内容溢出时显示滚动条 */
		}
	}
</style>